<template>
  <div class="platform-intro-page">
    <header class="hero-section">
      <div class="container">
        <h1>关于我们的平台</h1>
        <p>致力于为用户提供高品质的产品和服务</p>
      </div>
    </header>

    <section class="about-us-section">
      <div class="container">
        <div class="about-content">
          <div class="about-text">
            <h2>我们的故事</h2>
            <p>我们的平台成立于2020年，始终秉持着"以用户为中心"的理念，致力于为用户提供高品质的产品和卓越的购物体验。经过多年的发展，我们已经成为行业内具有影响力的电商平台之一。</p>
            <p>从创立之初，我们就坚持严格的产品质量控制，确保每一件上架的产品都经过专业团队的检测和评估。同时，我们也注重用户体验，不断优化购物流程，提升服务质量。</p>
          </div>
          <div class="about-image">
            <img src="https://picsum.photos/id/29/600/400" alt="我们的团队" class="team-img" />
          </div>
        </div>
      </div>
    </section>

    <section class="mission-vision-section">
      <div class="container">
        <div class="mission-vision-content">
          <div class="mission-vision-item">
            <div class="mission-vision-icon">
              <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                <path d="M2 17l10 5 10-5"></path>
                <path d="M2 12l10 5 10-5"></path>
              </svg>
            </div>
            <h3>我们的使命</h3>
            <p>通过提供高品质的产品和优质的服务，让每个人都能享受到便捷、愉悦的购物体验，提升生活品质。</p>
          </div>
          <div class="mission-vision-item">
            <div class="mission-vision-icon">
              <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12 6 12 12 16 14"></polyline>
              </svg>
            </div>
            <h3>我们的愿景</h3>
            <p>成为用户信赖的首选电商平台，引领行业发展，创造更大的社会价值。</p>
          </div>
          <div class="mission-vision-item">
            <div class="mission-vision-icon">
              <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path>
              </svg>
            </div>
            <h3>我们的价值观</h3>
            <p>诚信、创新、卓越、共赢。我们相信，只有坚持这些价值观，才能实现平台的可持续发展。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="features-section">
      <div class="container">
        <h2>平台特色</h2>
        <div class="features-grid">
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
              </svg>
            </div>
            <h3>品质保证</h3>
            <p>所有产品均经过严格的质量检测，确保为用户提供高品质的商品。</p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                <line x1="12" y1="22.08" x2="12" y2="12"></line>
              </svg>
            </div>
            <h3>丰富品类</h3>
            <p>涵盖电子产品、家居用品、服装鞋帽、美妆个护等多个品类，满足用户多样化需求。</p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12 6 12 12 16 14"></polyline>
              </svg>
            </div>
            <h3>优质服务</h3>
            <p>专业的客服团队提供7*24小时服务，及时解决用户问题，确保良好的购物体验。</p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
              </svg>
            </div>
            <h3>快速配送</h3>
            <p>与多家知名物流企业合作，建立全国覆盖的配送网络，确保商品快速送达。</p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
              </svg>
            </div>
            <h3>安全支付</h3>
            <p>采用多重加密技术，支持多种支付方式，保障用户的支付安全。</p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
              </svg>
            </div>
            <h3>无忧售后</h3>
            <p>完善的售后服务体系，7天无理由退换货，让用户购物更放心。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="team-section">
      <div class="container">
        <h2>我们的团队</h2>
        <p>由一群充满激情和创造力的专业人士组成，致力于为用户创造更好的购物体验。</p>
        <div class="team-grid">
          <div class="team-member" v-for="member in teamMembers" :key="member.id">
            <div class="member-image">
              <img :src="member.image" :alt="member.name" class="member-img" />
            </div>
            <div class="member-info">
              <h3 class="member-name">{{ member.name }}</h3>
              <p class="member-position">{{ member.position }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="partners-section">
      <div class="container">
        <h2>合作伙伴</h2>
        <p>与众多知名品牌和企业建立了长期稳定的合作关系，共同为用户提供优质的产品和服务。</p>
        <div class="partners-grid">
          <div class="partner-logo" v-for="partner in partners" :key="partner.id">
            <img :src="partner.logo" :alt="partner.name" class="partner-img" />
          </div>
        </div>
      </div>
    </section>

    <section class="contact-section">
      <div class="container">
        <div class="contact-content">
          <div class="contact-info">
            <h2>联系我们</h2>
            <p>如果您有任何问题或建议，欢迎随时联系我们。</p>
            <div class="contact-details">
              <div class="contact-item">
                <div class="contact-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                </div>
                <span class="contact-text">{{ contact.phone }}</span>
              </div>
              <div class="contact-item">
                <div class="contact-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                  </svg>
                </div>
                <span class="contact-text">{{ contact.email }}</span>
              </div>
              <div class="contact-item">
                <div class="contact-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                    <path d="M2 17l10 5 10-5"></path>
                    <path d="M2 12l10 5 10-5"></path>
                  </svg>
                </div>
                <span class="contact-text">{{ contact.address }}</span>
              </div>
            </div>
          </div>
          <div class="contact-form">
            <h3>发送消息</h3>
            <form @submit.prevent="handleSubmit">
              <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" v-model="formData.name" placeholder="请输入您的姓名" required />
              </div>
              <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" v-model="formData.email" placeholder="请输入您的邮箱" required />
              </div>
              <div class="form-group">
                <label for="message">消息内容</label>
                <textarea id="message" v-model="formData.message" placeholder="请输入您的消息内容" rows="4" required></textarea>
              </div>
              <button type="submit" class="btn-submit">发送</button>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 团队成员数据
const teamMembers = ref([
  {
    id: 1,
    name: '徐振',
    position: '项目设计',
    image: 'https://picsum.photos/id/64/300/300'
  },
  {
    id: 2,
    name: '徐枫',
    position: '产品总监',
    image: 'https://picsum.photos/id/65/300/300'
  },
  {
    id: 3,
    name: '徐梦晨',
    position: '技术总监',
    image: 'https://picsum.photos/id/66/300/300'
  },
  {
    id: 4,
    name: '赵六',
    position: '市场总监',
    image: 'https://picsum.photos/id/67/300/300'
  }
])

// 合作伙伴数据
const partners = ref([
  {
    id: 1,
    name: '合作伙伴1',
    logo: 'https://picsum.photos/id/42/200/80'
  },
  {
    id: 2,
    name: '合作伙伴2',
    logo: 'https://picsum.photos/id/43/200/80'
  },
  {
    id: 3,
    name: '合作伙伴3',
    logo: 'https://picsum.photos/id/44/200/80'
  },
  {
    id: 4,
    name: '合作伙伴4',
    logo: 'https://picsum.photos/id/45/200/80'
  },
  {
    id: 5,
    name: '合作伙伴5',
    logo: 'https://picsum.photos/id/46/200/80'
  }
])

// 联系信息
const contact = ref({
  phone: '400-123-4567',
  email: 'contact@example.com',
  address: '北京市朝阳区某某大厦A座1001室'
})

// 表单数据
const formData = ref({
  name: '',
  email: '',
  message: ''
})

// 表单提交处理
const handleSubmit = () => {
  // 在实际应用中，这里应该发送表单数据到服务器
  alert('感谢您的留言，我们会尽快回复您！')
  formData.value = {
    name: '',
    email: '',
    message: ''
  }
}
</script>

<style scoped>
.platform-intro-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 100px 0;
  text-align: center;
}

.hero-section h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
}

.hero-section p {
  font-size: 1.2rem;
}

.about-us-section {
  padding: 80px 0;
}

.about-content {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-text h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #333;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.about-image {
  flex: 1;
  min-width: 300px;
}

.team-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mission-vision-section {
  background-color: #f8f9fa;
  padding: 80px 0;
}

.mission-vision-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.mission-vision-item {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mission-vision-icon {
  margin-bottom: 20px;
  color: #667eea;
}

.mission-vision-item h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #333;
}

.mission-vision-item p {
  color: #666;
  line-height: 1.6;
}

.features-section {
  padding: 80px 0;
}

.features-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 50px;
  color: #333;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature-item {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-icon {
  margin-bottom: 20px;
  color: #667eea;
}

.feature-item h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #333;
}

.feature-item p {
  color: #666;
  line-height: 1.6;
}

.team-section {
  background-color: #f8f9fa;
  padding: 80px 0;
}

.team-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #333;
}

.team-section p {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 50px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.team-member {
  text-align: center;
}

.member-image {
  margin-bottom: 20px;
  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  border: 5px solid white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.member-position {
  color: #667eea;
  font-size: 0.9rem;
}

.partners-section {
  padding: 80px 0;
}

.partners-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #333;
}

.partners-section p {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 50px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  align-items: center;
  justify-items: center;
}

.partner-logo {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 150px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

.contact-section {
  background-color: #f8f9fa;
  padding: 80px 0;
}

.contact-content {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.contact-info {
  flex: 1;
  min-width: 300px;
}

.contact-info h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #333;
}

.contact-info p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-icon {
  color: #667eea;
}

.contact-text {
  font-size: 1rem;
  color: #333;
}

.contact-form {
  flex: 1;
  min-width: 300px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #667eea;
}

.btn-submit {
  width: 100%;
  padding: 15px;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #764ba2;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.2rem;
  }
  
  .about-content,
  .contact-content {
    flex-direction: column;
  }
  
  .about-text h2,
  .features-section h2,
  .team-section h2,
  .partners-section h2,
  .contact-info h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 80px 0;
  }
  
  .about-us-section,
  .mission-vision-section,
  .features-section,
  .team-section,
  .partners-section,
  .contact-section {
    padding: 60px 0;
  }
  
  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
  }
  
  .partner-logo {
    width: 120px;
    height: 70px;
    padding: 15px;
  }
}
</style>